<template>
    <div class="container mx-auto">
      <header class="bg-red-800 text-white p-4">
        <!-- Header content similar to home page -->
      </header>
  
      <main class="mt-8">
        <div class="flex">
          <!-- Product Images -->
          <div class="w-1/2 pr-8">
            <img src="/placeholder-image.jpg" alt="Product" class="w-full mb-4">
            <div class="flex space-x-2">
              <img v-for="n in 4" :key="n" src="/placeholder-image.jpg" alt="Thumbnail" class="w-1/4">
            </div>
          </div>
  
          <!-- Product Details -->
          <div class="w-1/2">
            <h1 class="text-2xl font-bold mb-4">灭火器</h1>
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div v-for="spec in specs" :key="spec.name" class="flex justify-between">
                <span>{{ spec.name }}:</span>
                <span>{{ spec.value }}</span>
              </div>
            </div>
            <p class="text-xl font-bold mb-2">¥120.0</p>
            <div class="flex items-center mb-4">
              <span class="mr-2">数量:</span>
              <input type="number" value="1" min="1" class="border p-2 w-16">
            </div>
            <button class="bg-yellow-500 text-black px-6 py-2 rounded">加入购物车</button>
          </div>
        </div>
  
        <!-- Product Description -->
        <div class="mt-8">
          <h2 class="text-xl font-bold mb-4">产品描述</h2>
          <p>这里是产品的详细描述......</p>
        </div>
      </main>
  
      <footer class="bg-gray-800 text-white p-4 mt-12">
        <p class="text-center">© 2024 Company Name. All rights reserved.</p>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        specs: [
          { name: '规格', value: '5kg' },
          { name: '型号', value: 'ABC5' },
          { name: '材质', value: '钢' },
          { name: '灭火剂', value: '干粉' },
        ]
      }
    }
  }
  </script>